<template>
  <el-tabs v-model="activeTab" :tab-position="tabPosition" style="margin-left: 10px;" class="demo-tabs">
    <el-tab-pane label="任务清单" name="task">
      <Task  :key="componentMatterListKey"></Task>
    </el-tab-pane>
    <el-tab-pane :lazy="true" label="事项认领" name="role">
      <matter-reception @createMatter="handleEditMatter" @seeMatter="handleSeeMatter"></matter-reception>
    </el-tab-pane>
    <el-tab-pane label="事项清单" name="matterList">
      <matter  :key="componentMatterListKey" @createMatter="handleCreateMatter"  @seeMatter="handleSeeMatter" @getInto="handleGetInto"></matter>
    </el-tab-pane>
    <el-tab-pane :lazy="true"  label="事项落实" name="taskImplementation">
      <practicable :activeTab="activeTab" :rowData="selectedRowData"></practicable>
    </el-tab-pane>
    <el-tab-pane :lazy="true" label="事项总结" name="summary">
      <matter-summary  @getInto="handleGetInto"></matter-summary>
    </el-tab-pane>
    <!-- <el-tab-pane :lazy="true" label="催办清单" name="urgeList">
      <urge-list/>
    </el-tab-pane> -->
<!--    <el-tab-pane :lazy="true" label="事项认领" name="role">-->
<!--      <task-reception @createMatter="handleEditMatter" @seeMatter="handleSeeMatter"></task-reception>-->
<!--    </el-tab-pane>-->
    <!-- <el-tab-pane :lazy="true" label="我的关注" name="care">
      <my-care :key="componentKey" @getInto="handleGetInto"></my-care>
    </el-tab-pane> -->
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import Matter from "../WorkImplementation/matter/index.vue";
import Task from "../WorkImplementation/matter/taskList.vue";
import Practicable from "../WorkImplementation/practicable/index.vue";
import matterSummary from "../WorkImplementation/matter/matterSummary.vue";
import taskReception from "../WorkImplementation/matter/taskReception.vue";
import matterReception from "../WorkImplementation/matter/matterReception.vue";
import UrgeList from "../WorkImplementation/matter/urgeList.vue";
import MyCare from "../WorkImplementation/matter/myCare.vue";
import workReport from "../WorkImplementation/matter/workReport.vue";

import myCare from "../WorkImplementation/matter/myCare.vue";
import MatterClaim from "../WorkImplementation/matter/matterClaim.vue";
const tabPosition = ref<'top' | 'right' | 'bottom' | 'left'>('top');
const route = useRoute();
// 判断传参route.query.tabName === undefined 时 设置默认的tab为 matterList ，则设置的tab为 route.query.tabName
const activeTab = route.query.tabName === undefined ? ref('task') : ref(route.query.tabName);

const emit = defineEmits(['createMatter', 'getInto']);
const selectedRowData = ref(null);

const handleCreateMatter = (row) => {
  // activeTab.value = 'createMatter'; // 切换到 createMatter 选项卡
  emit('createMatter', row); // 触发 createMatter 事件，并传递 row 数据
};
const handleEditMatter = (row) => {
  // activeTab.value = 'createMatter'; // 切换到 createMatter 选项卡
  emit('editMatter', row); // 触发 createMatter 事件，并传递 row 数据
};

const handleSeeMatter = (row) => {
  selectedRowData.value = row;
  activeTab.value = 'taskImplementation'; // 切换到 createMatter 选项卡// 触发 createMatter 事件，并传递 row 数据


//   import {watch} from 'vue';
//
// // 接收传入的 selectedRowData
//   const props = defineProps({
//     rowData: Object
//   });
//
// // 监听 selectedRowData 变化
//   watch(() => props.rowData, (newValue, oldValue) => {
//     if (newValue) {
//       alert(newValue.taskName)
//     }
//   }, {immediate: true});

};


const handleGetInto = (row) => {
  console.log(row)
  activeTab.value = 'handleGetInto'; // 切换到 handleGetInto 选项卡
  emit('getInto', row); // 触发 getInto 事件，并传递 row 数据
};



// 监听 activeTab 的变化
watch(activeTab, (newValue) => {
  if (newValue === 'care') {
    reloadComponent()
  }

  if (newValue === 'matterList' || newValue === 'task') {
    reloadComponentMatterList()
  }

});

const componentKey = ref(0);
const componentMatterListKey = ref(0);

function reloadComponent() {
  componentKey.value += 1;
}

function reloadComponentMatterList() {
  componentMatterListKey.value += 1;
}
</script>

<style scoped>
.demo-tabs {
  padding: 10px;
  margin-left: 10px;
}
.demo-tabs > .el-tabs__content {
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
